<template>
    <div class="like">

        <div class="classify">
          <ul>
              <router-link to="/usercenter">
                <li class="iconfont"><a href="###">&#xe616;个人信息</a></li>
              </router-link>
              <router-link to="/like">
                <li class="iconfont active"><a href="###" class="active">&#xe686;我的关注</a> <i style="color:#26a2ff">{{this.list.length}}</i></li>
              </router-link>
              <router-link to="/fans">
                <li class="iconfont"><a href="###">&#xe6cf;我的粉丝</a></li>
              </router-link>
              <router-link to="/collect">
                <li class="iconfont"><a href="###">&#xe60c;我的收藏</a></li>
              </router-link>
              <router-link to="/myblog">
                <li class="iconfont"><a href="###">&#xe6af;我的博客</a></li>
              </router-link>
              <router-link to="/myvideo">
                <li class="iconfont"><a href="###">&#xe64e;我的视频</a></li>
              </router-link>
              <router-link to="/mybook">
                <li class="iconfont"><a href="###">&#xe777;我的书籍</a></li>
              </router-link>
              
          </ul>
      </div>

      <div class="login" v-show="login">
        <a href="/#/login">还未登录，请先登录！</a>
      </div>


      <div class="single" v-show="main" ref="wrapper" >
        <ul>
          <li class="photo" v-for="(item,index) in list" :key="item.index">
            <router-link :to='"/userdetails/" + item.id'>
            <img src="../../../../../../static/imgs/photo.jpeg" alt="" v-if="!item.photo">
            <img :src="item.photo" alt="" v-if="item.photo">
            <span>{{item.name}}</span>
            </router-link>
            <a href="###" class="iconfont" title="取消关注" @click="del(index)">&#xe6fe;</a>
          </li>

          <div class="mark"  v-show="isshow">
            <p>确定取消关注？</p>
            <span><a href="###" @click="no()">取消</a></span>
            <span><a href="###" @click="dele(index)">确定</a></span>
          </div>

        </ul>
      </div>

      

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import classify from '../classify'
import BScroll from 'better-scroll'
export default {
    name: 'like',
    data () {
      return {
        isshow: false,
        login: true,
        main: false,
        list: [],
        index: '',
      }
    },
    components: {
        classify,
    },
    methods: {
      del (index) {
        this.isshow = true
        this.index = index
      },

      no () {
        this.isshow = false
      },

      dele () {
        this.isshow = false
        let postData = qs.stringify({
          id: this.list[this.index].id,
          statue: 1,
        })

        axios.post(`/api/user/attention`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
          }

        })

        axios.post(`/api/user/showAttentions`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.list = response.data
            console.log(this.list)

          } 

        })
      },

    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== '') {
            this.main = true
            this.login = false
            // console.log("111")
          }

        } 

      }) 

      axios.post(`/api/user/showAttentions`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          console.log(this.list)

        } 

      }) 

    },

    mounted () {
      this.$nextTick(() => {
        // 解决移动端因vue数据更新异步而无法滚动的问题
        this.scroll = new BScroll(this.$refs.wrapper, {
          click:true, //设置click参数，使单句歌词可点击
          adjustTime: 350, // 拉动之后的返回时间，默认400
          mouseWheel: true,
        })
      })

    }
}
</script>

<style lang="stylus" scoped>
.like
  width 100%
  position relative
  .classify
    width 15%
    height auto
    margin-top 5rem
    margin-left 1%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      padding-top 2rem
      padding-bottom 4rem
      margin-top .5rem
      // background-color red
      li
        width 100%
        margin-top .2rem
        line-height 4rem
        text-align center
        // background-color #fff
      li:hover
        //background-color #26a2ff
        background-color #eee
      .active
        background-color #eee
        color #26a2ff
  .login
    width 80%
    line-height 36.5rem
    top 0
    margin-left 17%
    margin-bottom 2rem
    text-align center
    font-size 1rem
    position absolute
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    a
      color red
    a:hover
      color #26a2ff
  .single
    width 79%
    height 36rem
    overflow hidden
    top 0
    margin-left 17%
    margin-bottom 2rem
    position absolute
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      position relative
      .photo
        width 90%
        height 4rem
        margin-left 5%
        position relative
        padding 1rem 0
        border-bottom .05rem #ccc solid
        background-color #fff
        img 
          width 5%
          height 3.5rem
          margin-left 2rem
          border-radius 50%
        span 
          margin-left 1rem
          font-size .9rem
          // background-color red
        .iconfont
          width 6%
          text-align center
          line-height 2rem
          position absolute
          top 2rem
          right 2.5rem
          font-size 1.6rem
          // background-color red
      .mark
        width 20%
        height 8rem
        position absolute 
        top 10rem
        left 40%
        border 1px #ccc solid
        border-radius 10px
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        background-color #fff
        p
          width 100%
          line-height 3rem
          font-size 1.2rem
          text-align center
          margin-top .5rem
          //   background-color #fff
        span 
          line-height 4rem
          padding .8rem
          margin-left 20%
          font-size .8rem
          background-color #fff
</style>